Code Playground

@use "sass:math";

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

$duration: 3s;

.loader {
  position: absolute;
  filter: blur(4px) contrast(4);

&::before {
    content: '';
    position: absolute;
    inset: -200px;
    background-color: #000;
  }

div {
    position: absolute;
    inset: -4px;
    background-color: #fff;
    border-radius: 50%;
    transform: rotate(var(--rz, 0)) translateY(120px);
    animation: mid $duration var(--midDelay, 0s) infinite linear;

@keyframes mid {
      0% { background-color: white; }
      20%, 100% { background-color: transparent; }
    }

&::before, &::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background-color: hsl(var(--_hue, var(--hue)) 100% 50%);
      animation: move $duration var(--_delay, var(--delay)) infinite ease-in-out;

@keyframes move {
        0%, 100% { 
          transform: translateY(var(--_ty, var(--ty))) scale(0);
        }
        50% {
          transform: translateY(var(--_ty, var(--ty))) scale(1);
        }
      }
    }

&::after {
      --_ty: calc(var(--ty) * -1);
      --_hue: calc(var(--hue) + 180);
      --_delay: calc(var(--delay) - #{$duration * 0.1});
    }

@for $i from 0 to 120 {
      &:nth-child(#{$i + 1}) {
        --rz: #{$i * 3deg};
        --delay: #{$duration * 3 / -120 * $i};
        --midDelay: #{$duration / 120 * $i - $duration};
        --ty: #{math.sin(21deg * $i) * 100%};
        --hue: #{3 * $i};
      }
    }
  }
}

Frontend Forever App